<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tree view</title>
    <meta charset="utf-8" />
    <style>
      html,
      body,
      div,
      span,
      a,
      code,
      ul,
      li {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        vertical-align: baseline;
      }
      body {
        line-height: 140%;
        font-family: Arial;
        background: white;
        font-size: 15px;
      }
      ul {
        list-style: none;
      }

      .tree li {
        list-style-type: none;
        position: relative;
        white-space: nowrap;
      }
      .tree ul {
        margin-left: 20px;
        padding-left: 0;
      }
      .tree li ul {
        display: none;
      }
      .tree li.open > ul {
        display: block;
      }
      .tree li div:before,
      .tree li div:after {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        margin: auto;
        background: #252527;
      }
      .tree li div:before {
        width: 10px;
        height: 2px;
        left: -1px;
      }
      .tree li div:after {
        width: 2px;
        height: 10px;
        left: 3px;
      }
      .tree li div:hover:after,
      .tree li div:hover:before {
        background: #00ac4f;
      }
      .tree li.open > div:after {
        display: none;
      }
      .tree li > div {
        padding-left: 17px;
        position: relative;
        display: inline;
        cursor: pointer;
        color: black;
        text-decoration: none;
      }
      .tree li > div:first-word {
        font-weight: bold;
      }
      /* no children ul */
      .o:after,
      .o:before {
        display: none !important;
      }
      .sc {
        text-decoration-color: black;
        font-weight: bold;
        background-color: #d9d9d9;
      }
      input {
        height: 36px;
        padding: 0 14px;
        border-radius: 4px;
        background: white;
        font-size: 16px;
        border: 1px solid #2023281a;
      }
      button {
        height: 36px;
        border: none;
        background: none;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
      }
      button:hover {
        color: #00ac4f;
      }
      .button_outlined {
        color: black;
        font-size: 15px;
        padding: 0 12px;
        background: white;
        border: 1px solid #2023281a;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .total-count {
        color: #5e5e5e;
        font-weight: bold;
        font-size: 14px;
      }
      .p {
        font-weight: bold;
      }
      .header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        gap: 16px;
        flex-direction: row;
        z-index: 100;
        padding: 8px 20px;
        background: #f5f5f5;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
      }
      .icon_gray {
        color: #b7b7b7;
      }
      .header-actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        flex: 1;
      }
      .header-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
      }
      .view-type {
        display: flex;
        gap: 8px;
        flex-direction: row;
        font-weight: bold;
        margin-top: 4px;
        align-items: center;
      }
      .view-type__decoration {
        display: flex;
        gap: 8px;
      }
      .header-item_search {
        gap: 8px;
        flex: 1;
      }
      .search-input {
        flex: 1;
      }
      .title {
        font-size: 16px;
      }
      .wrapper {
        padding: 70px 20px 10px;
        background: white;
        border-top: 1px solid #e9e9e9;
      }

      .child-count {
        border: 1px solid #abb1c1;
        border-radius: 3px;
        padding: 0 5px;
        color: #7d8089;
      }

      .t0,
      .t1,
      .t2,
      .t3,
      .t4,
      .t5,
      .t6 {
        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
      }
      .t0 {color: #3A6F38;}
      .t1 {color: #05B505;}
      .t2 {color: #006A7C;}
      .t3 {color: #9B0000;}
      .t4 {color: #A7A718;}
      .t5 {color: #CC5200;}
      .t6 {color: #7C8F45;}
      @media only screen and (max-width: 968px) {
        .only-desktop {
          display: none;
        }
      }
    </style>
<script>
function treeView(opt) {
	var tree = document.querySelectorAll('ul.tree div:not(:last-child)');
	for(var i = 0; i < tree.length; i++){
		var parent = tree[i].parentElement;
		var classList = parent.classList;
		if(opt == 0) {
			classList.add('open');
		} else {
			classList.remove('open');
		}
	}
}
function openParent(p,t) {
	if(p.parentElement.classList.contains('tree')) {
		return;
	}
	p.parentElement.classList.add('open');
	openParent(p.parentElement,t);
}
function search() {
	var tree = document.querySelectorAll('ul.tree span');
	var check = document.getElementById('check');
	for(var i = 0; i < tree.length; i++){
		tree[i].classList.remove('sc');
		if(tree[i].innerHTML.includes(document.getElementById('search').value)) {
			tree[i].classList.add('sc');
			openParent(tree[i].parentElement,tree);
		}
	}
}
function openUL(n) {
	var children = n.children;
	if(children.length == 1) {
		openNode(children[0]);
	}
}
function openNode(n) {
	var children = n.children;
	for(var i = 0; i < children.length; i++){
		if(children[i].nodeName == 'UL') {
			n.classList.add('open');
			openUL(children[i]);
		}
	}
}
function addClickActions() {
var tree = document.querySelectorAll('ul.tree div:not(:last-child)');
for(var i = 0; i < tree.length; i++){
	tree[i].addEventListener('click', function(e) {
		var parent = e.target.parentElement;
		var classList = parent.classList;
		if(classList.contains('open')) {
			classList.remove('open');
			var opensubs = parent.querySelectorAll(':scope .open');
			for(var i = 0; i < opensubs.length; i++){
				opensubs[i].classList.remove('open');
			}
		} else {
			if(e.altKey) {
				classList.add('open');
				var opensubs = parent.querySelectorAll('li');
				for(var i = 0; i < opensubs.length; i++){
					opensubs[i].classList.add('open');
				}
			} else {
				openNode(parent);
			}
		}
	});
}
}
</script>
  </head>
  <body>
    <div class="header">
      <div class="title">
        <div class="view-type">
          <span class="view-type__decoration only-desktop">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 17H5C3.89543 17 3 16.1046 3 15V3" stroke="#A2A2A2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 7H3" stroke="#A2A2A2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M21 8.5V5C21 4.17157 20.3284 3.5 19.5 3.5H17.4381C17.1071 3.5 16.7975 3.33616 16.6113 3.06243L16.1863 2.43757C16.0001 2.16383 15.6905 1.99999 15.3594 2H13.5C12.6716 2 12 2.67157 12 3.5V8.5C12 9.32843 12.6716 10 13.5 10H19.5C20.3284 10 21 9.32843 21 8.5Z" stroke="#A2A2A2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M21 19.5V16C21 15.1716 20.3284 14.5 19.5 14.5H17.4381C17.1071 14.5 16.7975 14.3362 16.6113 14.0624L16.1863 13.4376C16.0001 13.1638 15.6905 13 15.3594 13H13.5C12.6716 13 12 13.6716 12 14.5V19.5C12 20.3284 12.6716 21 13.5 21H19.5C20.3284 21 21 20.3284 21 19.5Z" stroke="#A2A2A2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span>/*title:*/ view</span>
          </span>
          <span class="total-count">total /*type:*/: /*count:*/</span>
        </div>
      </div>
      <div class="header-actions">
        <div class="header-item">
          <button alt="Collapse All" type="button" onclick="treeView(0)" class="button_outlined">Expand All</button>
          <button alt="Expand All" type="button" onclick="treeView(1)" class="button_outlined">Collapse All</button>
        </div>
        <div class="header-item header-item_search">
          <input class="search-input" type="text" id="search" value="" placeholder="Search..." size="35" onkeypress="if(event.keyCode == 13) search()"/>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <ul class="tree">
        /*tree:*/
        <script>
          addClickActions();
        </script>
      </ul>
    </div>
  </body>
</html>
